<template>
  <div class="box">
    <button @click="add">按钮1</button>
    <button @abc="abcAdd">按钮2</button>
    <!-- <Event1 @click.native="sendAdd"></Event1> -->
    <Event1 @click="sendAdd"></Event1>
    <Event2></Event2>
  </div>
</template>

<script>
// 原生事件
// 原生标签
// 绑定原生事件
// 事件类型: cheange,click,input...
// 特点: 一定是有限个数
// 触发机制: 触发事件之后,浏览器帮助触发
// 绑定自定义事件
// 事件类型 : abc
// 触发机制: 不能触发,无论怎么点击都不会触发
// 因为在原生标签中绑定自定义事件本身就没有意义

// -------------------

// 组件标签
// 绑定原生事件
// 点击之后也不会被触发,因为在组件中绑定原生事件都会被当成自定义事件
// 想要在组件标签上使用原生事件,  需要添加 .native 修饰符, 添加之后就可以在组件标签生使用原生事件

// 绑定自定义事件
// 谁绑定,谁触发
// 给那个组件标签绑定的,那个组件就通过 $emit来触发
// 需要注意的是,组件标签中自定义事件的名需要跟 子组件内部 $emit() 第一个参数设置成一样的
// 导入两个组件
import Event1 from './Event1.vue'
import Event2 from './Event2.vue'
export default {
  name: 'EventTest',
  components: { Event1, Event2 },
  methods: {
    add() {
      console.log('1111')
    },
    abcAdd() {
      console.log(100)
    },
    sendAdd() {
      console.log('abc')
    }
  }
}
</script>

<style scoped></style>
